<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<title>计算题生成器</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- 引入样式文件 -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />

	<!-- 引入 Vue 和 Vant 的 JS 文件 -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vant@2.12.54/lib/vant.min.js"></script>
	<script src="../libs/ColorManager.js"></script>
	<script src="../libs/Unify.js"></script>
	<script src="../libs/minicomps.min.js"></script>
	<script src="../libs/pinyin_dict_all.js"></script>
	<script src="../libs/easeljs.js"></script>
	<script src="../libs/moonEaseljs.js"></script>
	<title>morseLearn</title>
	<style>
		body,
		html {
			padding: 0;
			margin: 0;
			background: #f5f5f5;
		}

		.box {
			width: 94vw;
			margin: 0 auto;
		}

		.top {
			width: 94vw;
			margin: 0 auto;
		}

		.van-form {
			margin-top: 10px;
			height: 200px;
		}

		.van-cell-group {
			padding: 5px 15px;
			border-radius: 5px;
			margin-bottom: 10px;
		}

		.address {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
		}

		p {
			margin: 0;
			height: 24px;
		}

		* {
			-webkit-touch-callout: none;
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}
	</style>
</head>

<body>
	<div id="app">
		<div class="box">
			<van-row type="flex" justify="space-between">
				<van-button @click="onCreateTitle" color="#7232dd">生成题目</van-button>
				<van-button @click="onCreateName" color="#3399FF">班级姓名</van-button>
				<van-button @click="onRemoveTotal" color="#7232dd">全部删除</van-button>
				<van-popover v-model="showPopover" trigger="click" :actions="actions" @select="onSelectOther"
					theme="dark">
					<template #reference>
						<van-button color="#3399FF">更多操作</van-button>
					</template>
				</van-popover>
			</van-row>
			<van-dropdown-menu>
				<van-dropdown-item v-model="value1" :options="option1" @change="onSelectList" />
			</van-dropdown-menu>
			<van-form>
				<van-cell-group> <van-field v-model="inputTotal" label="一页题目数量"> </van-cell-group>
				<van-cell-group> <van-field v-model="inputLeft" label="符号左边位数"> </van-cell-group>
				<van-cell-group> <van-field v-model="inputRight" label="符号右边位数"> </van-cell-group>
				<van-cell-group> <van-field v-model="inputLine" label="一行题目数量"> </van-cell-group>
				<van-cell-group >
					<van-field
						v-model="message"
						rows="1"
						autosize
						type="textarea"
						placeholder="内容显示"
					/>
				</van-cell-group>
			</van-form>
		</div>
		
	</div>
	<script>
		Vue.use(vant.Lazyload);
		Vue.use(vant.DropdownMenu);
		Vue.use(vant.Overlay);

		var vue = new Vue({
			el: '#app',
			data: {
				className: '',
				titleArr: [],
				starArr:[],
				starTip:'',
				inputTotal: '21',
				inputLeft: '3',
				inputRight: '2',
				inputLine: '3',
				type: 0,
				value1: 0,
				message:'',
				option1: [
					{ text: '只要除法', value: 0 },
					{ text: '只要乘法', value: 1 },
					{ text: '有乘有除', value: 2 },
					{ text: '只要加法', value: 3 },
					{ text: '只要减法', value: 4 },
					{ text: '有加有减', value: 5 },
				],
				actions: [{ text: '最左标记*' }, { text: '标记*说明' }, { text: '删除标记*' }, { text: '删除班级' }, { text: '打开调式' }],
				showPopover: false,
			},
			methods: {
				onCreateTitle() {
					let [leftNum, rightNum] = [Number(this.inputLeft), Number(this.inputRight)];
					let total = Number(this.inputTotal);
					let xNum = Number(this.inputLine);
					let yNum = Math.ceil(total / xNum);
					this.titleArr=[];
					for (let i = 0; i < total; i++) {
						a = Unify.getRandomWeiShu(leftNum);
						b = Unify.getRandomWeiShu(rightNum);
						//如果a小于b，则交换两个数
						if (a < b) {
							let temp = a; a = b; b = temp;
						}
						let val;
						switch (this.type) {
							case 0: val = a + '÷' + b + '='; break;
							case 1: val = a + '×' + b + '='; break;
							case 2: val = Math.random() > 0.5 ? (a + '÷' + b + '=') : (a + '×' + b + '='); break;
							case 3: val = a + '+' + b + '='; break;
							case 4: val = a + '-' + b + '='; break;
							case 5: val = Math.random() > 0.5 ? (a + '+' + b + '=') : (a + '-' + b + '='); break;
						}
						this.titleArr.push(val);
					}
					this.reStartCreate();
				},
				reStartCreate(){
					this.message='\n';
					let total = this.titleArr.length;
					let xNum = Number(this.inputLine);
					if(this.className){
						this.message+=this.className;
					}
					if(this.starTip){
						this.message+='  '+this.starTip;
					}
					this.message+='\n\n';
					let hasStar=this.starArr.length>0;
					for (let i = 0; i < total; i++) {
						let val=this.titleArr[i];
						if((i+1)%xNum==0){
							if(hasStar)val='*'+val;
							val+='\n\n\n\n';
						}else{
							val+='          ';
						} 
						this.message += val;
					}
				},
				onSelectList(index) {
					this.$data.title = '';
					this.type = index;
				},
				onCreateStarLeft(e) {
					this.starArr.length=0;
					let total = Number(this.inputTotal);
					let xNum = Number(this.inputLine);
					let yNum = Math.ceil(total / xNum);
					for(let i=0;i<yNum;i++)this.starArr.push('*');
					this.reStartCreate();
				},
				onCreateStarTip(e) {
					var name = prompt("请输入对标记*的说明");  
					if(name){
						this.starTip=name;
						this.reStartCreate();
					}
				},
				onRemoveTotal(){
					this.starArr.length=this.titleArr.length=0;
					this.className=this.starTip='';
					this.reStartCreate();
				},
				onRemoveName(){
					this.className='';
					this.reStartCreate();
				},
				onRemoveStar(e) {
					this.starArr.length=0;
					this.starTip='';
					this.reStartCreate();
				},
				onCreateName(e) {
					this.className='班级______姓名______';
					this.reStartCreate();
				},
				onSelectOther(e) {
					console.log(e.text);
					switch (e.text) {
						case this.actions[0]['text']:
							this.onCreateStarLeft();
							break;
						case this.actions[1]['text']:
							this.onCreateStarTip();
							break;
						case this.actions[2]['text']:
							this.onRemoveStar();
							break;
						case this.actions[3]['text']:
							this.onRemoveName();
							break;
						case this.actions[4]['text']:
							this.showVConsole();
							break;
					}
				},
				showVConsole() {
					var vConsole = new VConsole();
				}
			}
		})
	</script>
</body>
</html>